<template>
    <div>
        <table>
            <tr>
                <td>序号1</td>
                <td>商品名称</td>
                
                <td>商品价格</td>
                <td>购买数量</td>
                <td>总价</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in tlist">
                <td>{{ item.id }}</td>
                <td>{{ item.good }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button @click="jian(index)">-</button>
                    {{ item.munber }}
                    <button @click="jia(index)">+</button>
                </td>
                <td>{{ item.price * item.munber }}</td>
                <td><button @click="def(item.id)">移除</button></td>

            </tr>
        </table>
        {{ totalCount() }}



    </div>
</template>

<script>
    export default {
        data() {
            return {
          
                tlist:[
                    {id:1,good:"iphone 8",price:5099,munber:1},
                    {id:2,good:"iphone xs",price:8699,munber:2},
                    {id:3,good:"iphone xr",price:6499,munber:3},
                ] 
            }
        },
        // 自定义方法
        methods: {
            //  减少商品数量
            jian(index){
                if (this.tlist[index].munber > 0){
                    this.tlist[index].munber--;                   
                }       
            },
            //  增加商品数量
            jia(index){               
                this.tlist[index].munber++; 
            },
            //  汇总商品总价
            totalCount:function(){
                //默认数量
                let total = 0;
                // 遍历
                for(let i=0,l=this.tlist.length;i<l;i++){
                    total += this.tlist[i].price * this.tlist[i].munber ;
                }
                return total;
            },
            // 删除
            def:function(id){
                let newlist = this.tlist.splice(0)
                for(let i=0;i<newlist.length;i++){
                    if(newlist[i].id==id) {
                        newlist.splice(i,1)
                        i--;
                    }
                }
                this.tlist=newlist;
            }
        },
    }
</script>

<style>

</style>